<template>
  <div class="container">
      <Header></Header>
      <Category :items="items"></Category>
      <Footer :active="'index'"></Footer>
      <ContentList></ContentList>
  </div>
</template>

<script>

import  Header from "@/components/home/Header"
import  Footer from "@/components/home/Footer"
import  Category from "@/components/home/Category"
import  ContentList from "@/components/home/ContentList"
export default {
  components: {
    Header,
    Category,
    Footer,
    ContentList
  },
  data () {
    return {
      items:[]
    }
  },
  async asyncData (context) {
    //请求后台数据 这里注意了参数必须使用config配置项 如果直接拼接字符串会有bug
    const { data } = await context.app.$axios.get("/app2/json/head.json")
    return  {items:data.data.primary_filter.slice(0,8)}
  },
}
</script>

<style lang="stylus">

</style>
